import React from 'react';

class Bodyer extends React.Component {
    constructor(props){
        super(props);
        this.state={
			value:''
		};
    	if(props.control!=undefined){
            this.initControl(props.control);
        }
		this.handleChange=this.handleChange.bind(this);
    }
    initControl(hooks){
        let that=this;
        this.control=hooks;
        this.control.addHook('change',function(data){
            let params=data.params;
            if(params!=undefined){
                that.setState(params.state);
            }
        });
    }
    render(){
        return (
            <div className="table-warper">
				<div className="table-tabbar">
					<span className="new-table-btn"></span>
					<div id="sheets-tabs" className="tabs-warper">
					</div>
				</div>
				<div className="table-statusbar">
					<div id="selectionCellStatus" className="active-cont">A</div>
					<div className="formula-warper">
						<span className="formula-del"><i className="fa fa-times-circle"></i></span>
						<span className="formula-save"><i className="fa fa-check-circle"></i></span>
						<div className="formula-cont"><input id="formula-val" value={this.state.value} placeholder="单元格值域" onChange={this.handleChange}/></div>
					</div>
				</div>
				<div className="table-container">
					<div id="sheets-container" className="table-warp">
					</div>
				</div>
			</div>
        );
    }
	handleChange(e){
		let value=e.target.value;
		this.setState({value:value});
		if(typeof this.control.dispatch==='function'){
			this.control.dispatch('callback',{type:value[0]==='='?'formula':'value',data:value});
		}
	}
}

export default Bodyer;